<template>
  <div class="component-transition p-8 h-full">
    <div class="flex flex-col md:flex-row items-start gap-6">
      <div class="w-full md:w-1/3 bg-purple-100 p-6 rounded-lg">
        <i class="fa fa-user text-6xl text-secondary mb-4"></i>
        <h2 class="text-2xl font-bold mb-2">用户组件</h2>
        <p class="text-gray-600">管理用户信息、个人设置和相关数据。</p>
      </div>
      <div class="w-full md:w-2/3">
        <h3 class="text-xl font-semibold mb-4">用户信息</h3>
        <div class="bg-gray-50 p-4 rounded-lg mb-6">
          <div class="flex items-center gap-4 mb-3">
            <span class="w-24 font-medium">用户名:</span>
            <span>example_user</span>
          </div>
          <div class="flex items-center gap-4 mb-3">
            <span class="w-24 font-medium">邮箱:</span>
            <span>user@example.com</span>
          </div>
          <div class="flex items-center gap-4">
            <span class="w-24 font-medium">注册日期:</span>
            <span>{{ registerDate }}</span>
          </div>
        </div>
        <button class="bg-secondary/10 text-secondary px-4 py-2 rounded hover:bg-secondary/20 transition-colors">
          编辑个人资料
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, defineEmits, ref } from 'vue'

const emit = defineEmits(['mounted', 'unmounted'])
const registerDate = ref('2023-01-15')

onMounted(() => {
  emit('mounted', 'UserComponent', 'mounted')
})

onUnmounted(() => {
  emit('unmounted', 'UserComponent', 'unmounted')
})
</script>